<!-- 提交结果页面 -->
<template>
	<view>
		<view class="rs-module">
<!--			<view class="rs-top rs-flex j-c" v-if="isLottery">-->
<!--				<text class="sc-text">答题成功，获得1次抽奖机会</text>-->
<!--			</view>-->
<!--      <view class="rs-top rs-flex j-c" v-else>-->
<!--        <text class="sc-text">答题失败，再接再厉</text>-->
<!--      </view>-->
			<view class="rs-item rs-flex">
				<text class="rs-lable">当前得分：</text>
				<text class="rs-value">
					<text class="rs-value-score">{{subInfo.score||'0'}}</text>
					<text class="rs-value-unit">分</text>
				</text>
			</view>
			<view class="rs-item rs-flex" >
				<text class="rs-lable">习题总分：</text>
				<text class="rs-value">{{subInfo.total_score||'0'}}分</text>
			</view>
			<view class="rs-item rs-flex">
				<text class="rs-lable">题目总数：</text>
				<text class="rs-value">{{subInfo.num ||'0'}}题</text>
			</view>
			<view class="rs-item rs-flex">
				<text class="rs-lable">答对题数：</text>
				<text class="rs-value">{{subInfo.correct_num||'0'}}题</text>
			</view>
			<view class="rs-item rs-flex">
				<text class="rs-lable">答错题数：</text>
				<text class="rs-value">
					<text style="color: #e03636;">{{subInfo.num - subInfo.correct_num ||'0'}}</text>题
				</text>
			</view>
			<view class="rs-item rs-flex">
				<text class="rs-lable">答案解析：</text>
				<text class="rs-value link"
					@click="openAnswer">查看答案解析>></text>
			</view>
		</view>
<!--    中奖了-->
    <view class="exerc-bottom su-border2" style="padding: 0 20rpx" v-if="userInfo.product_id">
      <button class="su-button">已领取奖品</button>
    </view>
    <view class="exerc-bottom su-border2" style="padding: 0 20rpx" v-else-if="userInfo.lottery_record_id" @click="getProductList">
      <button class="su-button">已中奖，去领取</button>
    </view>
<!--    今天是否抽过 -->
    <view class="exerc-bottom su-border2" style="padding: 0 20rpx" v-else-if="userInfo.is_day_lottery">
      <button class="su-button">很遗憾未中奖，明天再来</button>
    </view>
<!--   当前是否允许抽奖 -->
    <view class="exerc-bottom su-border2" style="padding: 0 20rpx" v-else-if="subInfo.is_lottery === 0" @click="toProduct">
      <button class="su-button">抽奖</button>
    </view>
    <!--   当前是否允许抽奖 -->
    <view class="exerc-bottom su-border2" style="padding: 0 20rpx" v-else-if="subInfo.is_lottery === -1" @click="toQs">
      <button class="su-button">再次答题</button>
    </view>

    <u-popup length="90%" v-model="show" mode="center" border-radius="14">
      <div class="popup-box">
        <div class="title">领取奖品</div>
        <u-radio-group v-model="form.product_id">
          <u-radio
              v-for="(item, index) in productList" :key="index"
              :name="item.id"
              :disabled="item.min_count <= 0 || item.count <= 0"
          >
            <div style="font-size: 24rpx;margin: 20px 0">
              <image style="width: 160rpx;height: 160rpx" :src="item.image"></image>
              <div v-if="item.min_count >0 && item.count >0">
                <div>名称：{{ item.name }}</div>
                <div>可领：{{ item.min_count }}个</div>
              </div>
              <div v-else>
                <div>名称：{{ item.name }}</div>
                <div>今日已抢光</div>
              </div>
            </div>
          </u-radio>
        </u-radio-group>
        <!-- 底部提交按钮 -->
        <view class="exerc-bottom su-border2">
          <button class="su-button" @click="submit">领取</button>
        </view>
      </div>
    </u-popup>

    <u-popup length="90%" v-model="show2" mode="center" border-radius="14">
      <div class="popup-box">
        <div class="title">确认领取信息</div>
        <u-form :model="userInfo" ref="uForm" label-width="140px" style="width: 100%">
          <u-form-item label="姓名"><u-input v-model="userInfo.nickname" /></u-form-item>
          <u-form-item label="手机号"><u-input type="phone" v-model="userInfo.phone" /></u-form-item>
          <u-form-item label="身份证号码"><u-input v-model="userInfo.id_no" /></u-form-item>
          <u-form-item label="地址"><u-input v-model="userInfo.address" /></u-form-item>
        </u-form>
        <!-- 底部提交按钮 -->
        <view class="exerc-bottom su-border2">
          <button class="su-button" @click="submit2">确认</button>
        </view>
      </div>
    </u-popup>

	</view>
</template>
<script>
	/**
	 * 提交结果页面
	 */
 	export default {
		data() {
			return {
        productList: [],
        subInfo: {
          score: 0,
          total_score: 0,
          num: 0,
          correct_num: 0
        },
        // 当日是否抽奖
        userInfo: {},
        // 是否
        isHandle: false,
        show: false,
        form: {},
        show2: false
			}
		},
    computed: {
      isLottery() {
        return this.subInfo.correct_num >= 1
      }
    },
		onLoad({ id }) {
      // 获取提交结果信息
      this.$api.getUserPracticeRecord({
        id
      }).then(res => {
        this.subInfo = res
      })
      // 获取用户信息
      this.userInfo = uni.getStorageSync('userInfo') || {}
      if (this.userInfo.id) {
        this.$api.getUserInfo({
          id: this.userInfo.id
        }).then(res => {
          this.userInfo = res
        })
      }
    },
		methods: {
			openAnswer() {
				const { id } = this.subInfo
				uni.navigateTo({
					url: `/pages/question/detail/resultDetail?id=${id}`
				})
			},
      getProductList() {
        this.show = true
        this.$api.getLotteryGoodsList().then(res => {
          this.productList = res.map(item => {
            // 当天的数据
            let lotteryRecordList = item.lotteryRecordList.filter(item => {
              return new Date(item.created_at).toDateString() === new Date().toDateString()
            })
            console.log(res.name,lotteryRecordList.length,lotteryRecordList)
            return {
              ...item,
              // 剩余数量
              // max_count - lotteryRecordList.length
              min_count: item.max_count - lotteryRecordList.length
            }
          })
        })
      },
      toProduct() {
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 10000
        })
        // 进行抽奖
        this.$api.startLottery({
          user_id: this.userInfo.id,
          record_id: this.subInfo.id
        }).then(res => {
          console.log(res,'结果')
          if (res.isWinner) {
            // 抽奖成功
            // 奖品选择弹窗
            this.getProductList()
          } else {
            // 抽奖失败
            uni.showToast({
              title: '谢谢参与',
              icon: 'none',
              duration: 2000
            })
          }
          this.isHandle = true
          this.$api.getUserInfo({
            id: this.userInfo.id
          }).then(res2 => {
            this.userInfo = res2
          })
        })
      },
      toQs() {
        this.$api.createUserPracticeRecord({
          num: 10,
          user_id: this.userInfo.id
        }).then(res => {
          uni.navigateTo({
            url: `/pages/question/create/create?id=${res.id}`
          })
        }).finally(() => {
          uni.hideLoading()
        })
      },
      submit() {
        if (!this.form.product_id) {
          uni.showToast({
            title: '请选择奖品',
            icon: 'none'
          })
          return
        }
        this.show2 = true
      },
      submit2() {
        // 验证姓名、手机号、地址、身份证号码
        if (!this.userInfo.nickname) {
          uni.showToast({
            title: '请填写姓名',
            icon: 'none'
          })
          return
        }
        // 验证手机号格式
        if (!/^1[3456789]\d{9}$/.test(this.userInfo.phone)) {
          uni.showToast({
            title: '请填写正确的手机号',
            icon: 'none'
          })
          return
        }
        // 验证地址
        if (!this.userInfo.address) {
          uni.showToast({
            title: '请填写地址',
            icon: 'none'
          })
          return
        }
        // 验证身份证号码格式
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.userInfo.id_no)) {
          uni.showToast({
            title: '请填写正确的身份证号码',
            icon: 'none'
          })
          return
        }
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 10000
        })
        // 更新
        this.$api.updateMember({
          ...this.userInfo,
        }).then(() => {
          // 更新领奖记录
          this.$api.updateLotteryRecord({
            product_id: this.form.product_id,
            lottery_record_id: this.userInfo.lottery_record_id,
            user_id: this.userInfo.id
          }).then(() => {
            this.show2 = false
            this.show = false
            uni.showToast({
              title: '领取成功',
              icon: 'success'
            })
            this.$api.getUserInfo({
              id: this.userInfo.id
            }).then(res2 => {
              this.userInfo = res2
            })
          })
        })
      }
		}
	}

</script>

<style lang="scss" scoped>
	$margin: 24upx;
	.rs-flex {
		display: flex;
	}
	.rs-module {
		margin: $margin;
		margin-top: 12upx;
		background-color: #ffffff;
		border-radius: 16upx;
		padding:28upx 58upx;
		padding-bottom: 58upx;

		.rs-top {
			align-items: center;
      justify-content: center;
      padding: 30rpx 0;
			.sc-icon {
				color: #6bbb72;
				font-size: 88upx;
			}
			.sc-text {
				color: #343434;
				font-size: 32upx;
				font-weight: bold;
				padding: 0 28upx;
			}
		}

		.rs-item {
			align-items: center;
			.rs-lable {
				color: #636463;
			}
			.rs-value {
				padding: 0 24upx;
				line-height: 70upx;
				&-score {
					color: #e03636;
					font-size: 48upx;
				}
				&-unit {
					color: #343434;
					font-size: 32upx;
				}

				&.link {
					color: $maincolor;
					&:active {
						opacity: 0.8;
					}
				}
			}

		}
	}

  .popup-box {
    padding: 30rpx;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      font-size: 32rpx;
      font-weight: bold;
      padding: 32rpx 0;
      text-align: center;
    }
    .exerc-bottom {
      width: 100%;
      margin-top: 20rpx;
    }
  }
</style>
